<script>
import ROUTER_CONFIG from '@Routers/index'
import { computed, defineComponent, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    let route = useRoute()
    let router = useRouter()
    let _list = ROUTER_CONFIG()
    let selectedKeys = reactive({ data: [] })
    let openKeys = reactive({ data: [] })
    const handlerClick = (e) => {
      router.push({ path: e.keyPath.join('/') })
      return
    }
    const switchMenuSelect = computed(() => {
      // if (route.meta.disableInMenu) return //一些不需要在左边菜显示的路由，在切换到些路由时，左边菜单的openkeys和selectkeys状态不变化

      let _arr = route.matched[route.matched.length - 1].path
        .split('/')
        .filter((x) => x != '')

      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      selectedKeys.data = [_arr.pop()]

      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      openKeys.data = _arr.map((x, index) => {
        return index == 0 ? '/' + x : x
      })

      //禁用菜单时,左边菜单selectkey选中配置中的名称
      if (route.meta.disableInMenu) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        selectedKeys.data = [route.meta.reSelectkeyName]
      }

      return route.path
    })

    let createMenu = () => {
      return (
        <a-menu
          id="menu"
          style="width: 100%"
          inlineIndent={12}
          selectedKeys={selectedKeys.data}
          openKeys={openKeys.data}
          mode="inline"
          onClick={(e) => {
            handlerClick(e)
          }}
        >
          {makeMenuItem(_list)}
        </a-menu>
      )
    }
    let makeMenuItem = (_menu) => {
      return _menu.map((x) => {
        if (x.meta?.disableInMenu) return
        if (x.children) {
          return (
            <a-sub-menu
              key={x.path}
              title={x.meta.cn}
              class={{ shadow: x.meta.onlyNode }}
              v-slots={{
                icon: () => {
                  return x.icon
                },
              }}
            >
              {makeMenuItem(x.children)}
            </a-sub-menu>
          )
        } else {
          return (
            <a-menu-item
              key={x.path}
              v-slots={{
                icon: () => {
                  return x.icon
                },
              }}
              title={x.meta.cn}
            >
              {x.meta.cn}
            </a-menu-item>
          )
        }
      })
    }

    return {
      createMenu,
      handlerClick,
      switchMenuSelect,
    }
  },
  render() {
    return <div d={this.switchMenuSelect}>{this.createMenu()}</div>
  },
})

// export let createMenu = (selectedKeys, handlerClick, openKeys, router) => {
//   let _list = ROUTER_CONFIG()
//   return (
//     <a-menu
//       id="menu"
//       style="width: 100%"
//       inlineIndent={12}
//       selectedKeys={selectedKeys.data}
//       openKeys={openKeys.data}
//       mode="inline"
//       onClick={(e) => {
//         handlerClick(e)
//       }}
//     >
//       {makeMenuItem(_list)}
//     </a-menu>
//   )
// }

// export const makeMenuItem = (_menu) => {
//   return _menu.map((x) => {
//     if (x.meta?.disableInMenu) return
//     if (x.children) {
//       return (
//         <a-sub-menu
//           key={x.path}
//           title={x.meta.cn}
//           class={{ shadow: x.meta.onlyNode }}
//           v-slots={{
//             icon: () => {
//               return x.icon
//             },
//           }}
//         >
//           {makeMenuItem(x.children)}
//         </a-sub-menu>
//       )
//     } else {
//       return (
//         <a-menu-item
//           key={x.path}
//           v-slots={{
//             icon: () => {
//               return x.icon
//             },
//           }}
//           title={x.meta.cn}
//         >
//           {x.meta.cn}
//         </a-menu-item>
//       )
//     }
//   })
// }
</script>
